<template>
 <div style="height:100%">
   <div style="height:100%">
    <el-container style="height:100%">
      <el-header>
        <div class="title">
          积云教育学生管理
        </div>
        <div class="edit">
          欢迎你admin <el-button @click="edit">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div v-for="(item,i) in navlist" :key="i" @click="to(item)" :class="item.id==active?'active':''">
            {{item.title}}
          </div>
        </el-aside>
        <el-main>
          <div class="a">
            
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
 </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
 name: "",
 setup() {
 const router = useRouter();
 const route = useRoute();
 const store = useStore();
 const data = reactive({
  navlist:[
    {
      title:"前端开发",
      id:1,
      path:"/qianduan",
      name:"qianduan"
    },
    {
      title:"视觉设计",
      id:2,
      path:"/shijue",
      name:"shijue"
    },
    {
      title:"全栈开发",
      id:3,
      path:"/quanzhan",
      name:"quanzhan"
    },
    {
      title:"人工智能",
      id:4,
      path:"/rengong",
      name:"rengong"
    },
    {
      title:"系统管理",
      id:5,
      path:"/xitong",
      name:"xitong"
    },
  ],
  active:'1'
 });

 const edit=()=>{
  localStorage.removeItem('token');
  router.push('/login')
 }
 const to=(item)=>{
    data.active=item.id
    let obj={name:item.name,title:item.title}
    store.state.info=obj
    router.push(`${item.path}`)
 }
 return {
 ...toRefs(data),
 edit,
 to
 };
},
};
</script>

<style scoped lang='scss'>
.el-header{
  background: black;
  color: white;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title{
    font-size: 26px;
  }
  .edit{
    font-weight: normal;
  }
}
.el-aside{
  background: black;
  color: white;
  height: 100%;
  div{
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
.active{
  background: #81c9ed;
}
.a{
  padding: 20px;
  background: white;
}
.el-main{
  background: #eee;
}
</style>